<template>
  <x-dialog
    :title="title"
    :close-on-click-modal="false"
    :show.sync="visible"
    v-if="visible"
    class="supplier-dialog"
    append-to-body
    width="800px"
    :before-close="handleClose"
    @onCancel="handleClose"
    @onSubmit="handleSubmit"
  >
    <div class="main-content">
      <div class="tree-area">
        <el-tree
          :props="treeProps"
          ref="tree"
          node-key="id"
          default-expand-all
          :highlight-current="true"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :data="postTreeData"
          check-strictly
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="table-area">
        <!-- <x-filter @search="handleSearch" @reset="handleReset" class="dialog-fliter">
        <x-filter-item label="用户名称">
          <el-input v-model="searchParams.uesrname" ></el-input>
        </x-filter-item>
      </x-filter> -->
        <x-table
          :data-source="tableData"
          size="mini"
          @on-change="handleTableChange"
          @on-selection-change="handleSelectionChange"
          :pagination="pagination"
          :loading="loading"
          :row-key="'id'"
          :height="338"
        >
          <el-table-column v-if="multiple" type="selection" width="60"></el-table-column>
          <el-table-column v-else width="60">
            <template #default="scope">
              <!-- label值要与el-table数据id实现绑定 -->
              <el-radio v-model="checked" :label="scope.row.id" @change="handleRowSelect(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="realName" label="姓名"></el-table-column>
          <el-table-column prop="mobile" label="手机号"></el-table-column>
          <el-table-column prop="deptId" label="岗位"></el-table-column>
          <el-table-column prop="postId" label="部门"></el-table-column>
        </x-table>
      </div>
    </div>
  </x-dialog>
</template>
<script>
  import { TableListMixin, QueryDictMixin, PermissionsMixin } from '@package/utils'
  // import { TableListMixin, QueryDictMixin, PermissionsMixin } from '@/common/mixins'
  import { mapState } from 'pinia'
  import { pinias } from '@/common/pinia'
  import { EnumApiCode } from '../../../../../../globalEnum'
  import { listOrgUserUrl as listUrl, apiDeptTree } from '../api'

  const { login } = pinias
  export default {
    components: {},
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    props: {
      multiple: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '用户选择'
      }
    },
    computed: {
      ...mapState(login, ['user'])
    },
    data() {
      return {
        visible: false,
        searchParams: {
          deptId: '',
          uesrname: ''
        },
        listUrl,
        tableData: [],
        checked: null,
        selectData: [], // 选中的数据
        treeProps: {
          label: 'deptName',
          children: 'children'
        },
        postTreeData: [],
        currentNode: {}
      }
    },
    methods: {
      show() {
        this.visible = true
        this.loadTreeData()
        this.loadData()
      },
      handleNodeClick(node) {
        this.currentNode = node
        this.handleSearch({ deptId: this.currentNode.id })
      },
      async loadTreeData() {
        this.treeLoading = true
        const { orgId } = this.user.mainPost
        const { data, code, msg } = await apiDeptTree({ orgId })
        this.treeLoading = false
        if (code === EnumApiCode.Success) {
          this.postTreeData = data
          if (this.postTreeData?.length) {
            this.currentNode =
              this.currentNode?.id && this.$refs.tree.getNode(this.currentNode.id)
                ? this.currentNode
                : this.postTreeData[0]
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNode.id)
            })
            this.handleSearch({ deptId: this.currentNode.id })
          }
        } else {
          this.$message.error(msg)
        }
      },
      handleSearch(val) {
        this.queryParam = { ...this.searchParams, ...val }
        this.loadData()
      },
      handleReset() {
        this.resetSearch()
      },
      // 多行选中
      handleSelectionChange(rows) {
        this.selectData = rows
      },
      // 单选某行选中
      handleRowSelect(row) {
        this.selectData = [row]
      },
      // 弹窗关闭
      handleClose() {
        this.checked = null
        this.selectData = []
        this.visible = false
      },
      // 弹窗确定
      handleSubmit() {
        if (this.selectData.length) {
          this.$emit('onConfirm', this.selectData)
          this.handleClose()
        } else {
          this.$message.error('请至少选择一条数据点击确定')
        }
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      }
    }
  }
</script>
<style lang="scss" scoped>
  .supplier-dialog {
    .dialog-fliter {
      // margin-bottom: 10px;
    }
    .x-table-container {
      height: 380px;
    }
    ::v-deep .x-filter-container {
      background: none;
      box-shadow: none;
      border: none;
    }
    ::v-deep .x-filter-content {
      padding: 0;
    }
    .main-content {
      display: flex;
      .tree-area {
        width: 200px;
        border: 1px solid #ccc;
      }
      .table-area {
        flex: 1;
        padding: 0 10px;
      }
    }
  }
</style>
